<template>
    <div class="prop_container">
        <component
            v-for="(prop, value, index) in focusComponent"
            :key="prop.label"
            :prop="prop"
            :is="isComponent(prop.type)"
        ></component>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import {
    colorComponent,
    progressComponent,
    switchComponent,
    inputComponent,
    radioComponent,
} from './propComponents.jsx';

const props = defineProps({
    modelValue: {
        type: Object,
        default: () => {}
    },
    focusIndex: {
        type: Object,
        default: () => {}
    },
})

const focusComponent = computed(() => {
    const prop = props.modelValue[props.focusIndex.value]?.props;
    return prop ? prop : {}
})

const isComponent = (type) => {
    let component = null;
    switch (type) {
        case 'colorComponent':
            component = colorComponent;
            break;
        case 'progressComponent':
            component = progressComponent;
            break;
        case 'switchComponent':
            component = switchComponent;
            break;
        case 'inputComponent':
            component = inputComponent;
            break;
        case 'radioComponent':
            component = radioComponent;
            break;
        default:
            break;
    }
    return component;
}
</script>